<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>必要商城_大牌品质 工厂价格</title>
	<link href="http://static.biyao.com/pc/favicon.ico" rel="shortcut icon" type="image/x-icon">
	<link href="./lib/common.css" rel="stylesheet" type="text/css">
	<link href="./lib/new.main.css" rel="stylesheet" type="text/css">
	<link href="./lib/elementUI.css" rel="stylesheet" type="text/css">
	<link href="./lib/global.css" rel="stylesheet" type="text/css">
	<link href="./lib/iprHeader.css" rel="stylesheet" type="text/css">

	<link rel="stylesheet" type="text/css" href="./lib/new.category.css">

</head>

<body id="pagebody">







	<div class="header header-index"></div>
	<!-- 导航栏 -->
	<div class="nav nav-index">
		<div class="clearfix">
			<a href="http://www.biyao.com/home/index.html" class="nav-logo"><img src="./lib/logo.png" height="51"></a>
			<div class="nav-category">
				<p><span>全部分类</span><i></i></p>
				<div>
					<ul class="nav-list">

						<li class="nav-main">
							<p>


								<a href="http://www.biyao.com/classify/category.html?categoryId=621">
									咖啡
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=627">
									饮食
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=691">
									正餐
								</a>

							</p>
						</li>

						<li class="nav-main">
							<p>


								<a href="http://www.biyao.com/classify/category.html?categoryId=279">
									男装
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=294">
									女装
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=35">
									鞋靴
								</a>

							</p>
						</li>

						<li class="nav-main">
							<p>


								<a href="http://www.biyao.com/classify/category.html?categoryId=122">
									眼镜
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=339">
									内衣配饰
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=39">
									运动
								</a>

							</p>
						</li>

						<li class="nav-main">
							<p>


								<a href="http://www.biyao.com/classify/category.html?categoryId=119">
									美妆
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=724">
									个护
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=391">
									母婴
								</a>

							</p>
						</li>

						<li class="nav-main">
							<p>


								<a href="http://www.biyao.com/classify/category.html?categoryId=652">
									生鲜直供
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=51">
									餐厨
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=334">
									电器
								</a>

							</p>
						</li>

						<li class="nav-main">
							<p>


								<a href="http://www.biyao.com/classify/category.html?categoryId=153">
									箱包
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=223">
									数码办公
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=429">
									汽配
								</a>

							</p>
						</li>

						<li class="nav-main">
							<p>


								<a href="http://www.biyao.com/classify/category.html?categoryId=355">
									家纺
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=10">
									家具
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=369">
									家装
								</a>

							</p>
						</li>

						<li class="nav-main">
							<p>


								<a href="http://www.biyao.com/classify/category.html?categoryId=546">
									健康保健
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=685">
									宠物
								</a>

								<span>/</span>

								<a href="http://www.biyao.com/classify/category.html?categoryId=816">
									礼品
								</a>

							</p>
						</li>

					</ul>
				</div>
			</div>
			<div class="nav-search">
				<p><input type="text" id="searchInput" placeholder="请输入要搜索的商品"><span id="searchBtn"></span></p>
				<ul>
					<li>电动牙刷</li>
					<li>男士内裤</li>
					<li>防晒霜</li>
					<li>防晒</li>
					<li>防晒衣女</li>
					<li>眼镜近视女</li>
					<li>洗发水</li>
					<li>面膜</li>
					<li>凉席</li>
					<li>沐浴露</li>
				</ul>
			</div>
			<div class="nav-tab">
				<ul>
					<li><a href="http://www.biyao.com/home/index.html">首页</a></li>
					<li><a href="http://www.biyao.com/classify/newProduct.html">每日上新</a></li>
					<li class="border-l"></li>
					<li class="nav-tab-last">
						<div class="hover_text">
							了解必要
							<div class="hover_code gzh">
								<span>关注必要微信公众号<br>了解你想了解的一切<br>小必姐在此发福利哦</span>
							</div>
						</div>
					</li>
					<li class="nav-tab-last" id="appDownload">下载必要APP</li>
					<li class="border-l"></li>
					<li class="nav-tab-last">
						<div class="hover_text">
							我的必要
							<div class="hover_code app">
								<span>
									扫码下载必要app
									<br>
									手机用户独享海量权益
								</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>



	<!-- 分类栏 -->
	<div class="cateBread">
		<span>一级分类：</span>
		<ul id="one">
			<li>示例</li>
		</ul>
	</div>
	<div class="cateBread">
		<span>二级分类：</span>
		<ul id="two">
			<li>休食</li>
		</ul>
	</div>
	<div class="cateBread">
		<span>三级分类：</span>
		<ul id="three">
			<li>零食</li>
		</ul>
	</div>

	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>

	<script>
		// 1. 请求一级分类列表铺设
		axios({
			url: 'http://123.57.109.30:3999/api/categoryfirst'
		}).then(res => {
			document.querySelector('#one').innerHTML = res.data.list.map(obj => {
				return `<li data-id=${obj.firstId}>${obj.firstName}</li>`
			}).join('')
		})

		// 2. 监听一级分类点击事件
		document.querySelector('#one').addEventListener('click', e => {
			if (e.target.tagName === 'LI') {
				// 3. 拿到点击的一级分类id值
				let firstId = e.target.dataset.id
				// 4. 请求二级分类列表并铺设
				axios({
					url: 'http://123.57.109.30:3999/api/categorySecond',
					params: {
						firstId
					}
				}).then(res => {
					document.querySelector('#two').innerHTML = res.data.list.map(obj => {
						return `<li data-id=${obj.secondId}>${obj.secondName}</li>`
					}).join('')
				})
			}
		})


		// 5. 监听二级分类点击事件
		document.querySelector('#two').addEventListener('click', e => {
			if (e.target.tagName === 'LI') {
				// 6. 拿到点击的二级分类id值
				let secondId = e.target.dataset.id
				// 4. 请求三级分类列表并铺设
				axios({
					url: 'http://123.57.109.30:3999/api/categoryThird',
					params: {
						secondId
					}
				}).then(res => {
					document.querySelector('#three').innerHTML = res.data.list.map(obj => {
						return `<li>${obj.thiredName}</li>`
					}).join('')
				})
			}
		})
	</script>
</body>

</html>